<script setup>
import { ref, onMounted } from "vue"
import { useIndexStore } from "@/store/index.js"
import { usejianliStore } from "@/store/jianli/jianli"
import { useRouter } from "vue-router"
import colorfulFont from "@/components/colorfulFont.vue"

const indexStore = useIndexStore()
const jianliStore = usejianliStore()
const router = useRouter()
const { setIndexState } = useIndexStore()

const nav_bar_click = (item) => {
	setIndexState({
		header_nav_bar_active: item.id,
	})
	if (item.id == 3) {
		setIndexState({
			navWidth: "0px",
			navOpacity: 0,
		})
	} else {
		setIndexState({
			navWidth: "26%",
			navOpacity: 1,
		})
	}
}

const callme = () => {
	router.push({ name: "callme" })
	jianliStore.setSelectMenuNum(3)
	indexStore.setIndexState({
		navWidth: "0px",
		navOpacity: 0,
		header_nav_bar_active: 3,
	})
	indexStore.setHeader_nav_list("callme")
}
</script>
<template>
	<div class="my-header">
		<!-- <div class="title">李伦祥</div> -->
		<colorfulFont
			msg="李伦祥"
			className="title"
			backgroundImage="linear-gradient(45deg, #122947, #005476, #008290, #00B08F, #85D97D, #F9F871)" />
		<div class="nav-bar">
			<router-link
				:to="{ name: item.to_name }"
				class="nav-bar-item"
				v-for="item in indexStore.header_nav_list"
				:key="item"
				:class="
					indexStore.indexState.header_nav_bar_active == item.id
						? 'active'
						: ''
				"
				@click="nav_bar_click(item)">
				{{ item.label }}
			</router-link>
		</div>
		<div class="avatar" @click="callme">
			<span class="span">联系我</span>
			<el-avatar :size="30" src="../images/a.jpeg" />
		</div>
	</div>
</template>
<style scoped lang="scss">
.my-header {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: $all-bg-color;
	.title {
		font-size: 40px;
		font-weight: bolder;
	}

	.nav-bar {
		font-size: 20px;
		display: flex;
		height: 60px;
		justify-content: flex-end;
		align-items: center;
		padding: 5px;
		margin-right: 30px;
		.nav-bar-item {
			height: 100%;
			width: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: $all-color;
			cursor: pointer;
			transition: all $animation-duration-05;
			&:hover {
				animation: swing $animation-duration-105 $animation-ease-linear !important;
				background-color: $header-item-hover-bg-color;
			}
		}
		&:hover .active {
			animation: none;
		}
		.active {
			animation: swing $animation-duration-105 $animation-ease-linear;
			background-color: $header-item-active-bg-color;
			color: $header-item-active-color;
		}
	}
	.avatar {
		height: 40px;
		display: flex;
		align-items: center;
		border-radius: 38px;
		background-color: $show-bg-color;
		color: $all-color;
		padding: 20px;
		cursor: pointer;
		transition: all $animation-duration-05;
		&:hover {
			color: $header-item-active-color;
			//循环
			animation: scales $animation-duration-105 $animation-ease-linear;
		}
		.span {
			margin-right: 10px;
		}
	}
}
</style>
